<template>
	<view class="content">
		<view class="box">
			<view class="address" @click="goAddress">
				<view class="haveAddress" v-if="addressForm.address">
					<view class="left">
						<u-icon name="map" size="24"></u-icon>
					</view>
					<view class="right">
						<view class="top">
							<view class="name">
								{{addressForm.name}}
							</view>
							<view class="phone">
								{{addressForm.mobile}}
							</view>
						</view>
						<view class="bottom">
							{{addressForm.address + addressForm.detail_address}}
						</view>
					</view>
				</view>
				<view class="noAddress" v-else>
					<view class="text">
						请选择收获地址
					</view>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="goods">
				<view class="img">
					<u--image :showLoading="true" :src="goods.goods_img" width="180rpx" height="180rpx"></u--image>
				</view>
				<view class="text">
					<view class="top">
						{{goods.goods_name}}
					</view>
					<view class="bottom">
						X 1
					</view>
				</view>
				<view class="num">
					¥{{goods.goods_price}}
				</view>
			</view>
			<view class="pay">
				<view class="paytype">
					<view class="paytype-title">
						支付方式
					</view>
					<view class="paytype-type">
						<view class="WeChat" @click="payTypeFunc('integrate')">
							<view class="pay-title">
								<view class="pay-img">
									<u-icon name="rmb-circle-fill" color="#458acf" size="24"></u-icon>	
								</view>
								<view class="pay-name">
									积分兑换{{memberHome.amount}}
								</view>
							</view>
							<view class="pay-function">
								<u--image :showLoading="true" src="/static/img/radio_active.png" width="48rpx"
									height="48rpx" v-if="paytype=='integrate'"></u--image>
								<u--image :showLoading="true" src="/static/img/radio.png" width="42rpx" height="42rpx"
									v-else></u--image>
							</view>
						</view>
						<view class="Alipay" @click="payTypeFunc('Alipay')">
							<view class="pay-title">
								<view class="pay-img">
									<u--image :showLoading="true" src="/static/img/Alipay.png" width="48rpx"
										height="48rpx"></u--image>
								</view>
								<view class="pay-name">
									支付宝
								</view>
							</view>
							<view class="pay-function">
								<u--image :showLoading="true" src="/static/img/radio_active.png" width="48rpx"
									height="48rpx" v-if="paytype=='Alipay'"></u--image>
								<u--image :showLoading="true" src="/static/img/radio.png" width="42rpx" height="42rpx"
									v-else></u--image>
							</view>
						</view>
						<view class="WeChat" @click="payTypeFunc('WeChat')">
							<view class="pay-title">
								<view class="pay-img">
									<u--image :showLoading="true" src="/static/img/WeChat.png" width="48rpx"
										height="48rpx"></u--image>
								</view>
								<view class="pay-name">
									微信
								</view>
							</view>
							<view class="pay-function">
								<u--image :showLoading="true" src="/static/img/radio_active.png" width="48rpx"
									height="48rpx" v-if="paytype=='WeChat'"></u--image>
								<u--image :showLoading="true" src="/static/img/radio.png" width="42rpx" height="42rpx"
									v-else></u--image>
							</view>
						</view>
						
					</view>
				</view>
				<view class="confirmed">
					<view class="btn" @click="withdrawal">
						支付
					</view>
				</view>
			</view>
		</view>
		<view class="popup-box" v-if="popupModal">
			<view class="inner-box">
				<view class="title">
					<image src="../../../static/img/alipay_successful.png"></image>
				</view>
				<view class="content-box">
					<view class="img-box">
						<image src="../../../static/img/authentication_ok.png"></image>
					</view>
					<view class="text" v-if="paytype != 'integrate'">
						您已成功支付，可到购买列表查看！
					</view>
					<view class="text" v-else>
						您已成功兑换，可到购买列表查看！
					</view>
					<view class="btn-box">
						<view class="btn home-btn" @click="gotoHome">
							返回首页
						</view>
						<view class="btn order-btn" @click="gotoOrder">
							查看订单
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paytype: '',
				cashForm: {
					money: '',
					type: '',
					goods: {},
				},
				goods: "",
				order_id: '',
				popupModal: false,
				checked: false,
				addressForm: {},
				orderForm: {},
				settingData: {},
				kefuData: {},
				memberHome: {},
				form: {
					product_id: null,
					remark: null,
					address_id: null
				},
			}
		},
		onLoad(e) {
			this.getMemberHome()
			this.settingData = uni.getStorageSync('settingData')
			// this.memberHome =  uni.getStorageSync('memberHome')
			this.kefuData= this.settingData.value
			this.goods = JSON.parse(e.obj)
			
			console.log(this.goods)
			this.order_id = e.order_id
			this.form.product_id = this.goods.id
			this.getAddress()
			// this.getProductInfo(e.id)
			
		},
		methods: {
			updataAddress(obj) {
				console.log(obj);
				this.addressForm = obj
				this.form.address_id = obj.address_id
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/person/my/deliveryaddress'
				})
			},
			getAddress() {
				this.$api.addressinfo({
					is_default: 1
				}).then(res => {
					console.log(res.data)
					this.addressForm = res.data
					this.form.address_id = res.data.address_id
					if(!this.addressForm.name){
						this.addressForm = uni.getStorageSync('addressForm')
						this.form.address_id = this.addressForm.address_id
					}
				})
			},
			getProductInfo(id) {
				this.$api.productinfo({
					id
				}).then(res => {
					this.orderForm = res.data
				})
			},
			gotoHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			gotoOrder() {
				uni.switchTab({
					url: '/pages/subscription/subscription'
				})
			},
			payTypeFunc(type) {
				if (type == 'Alipay') {
					this.paytype = 'Alipay'
					this.cashForm.type = 1
				} else if (type == 'WeChat') {
					this.paytype = 'WeChat'
					this.cashForm.type = 2
				} else{
					this.paytype = 'integrate'
					this.cashForm.type = 3
					// this.goBank()
				}
			},
			alipayFunc() {
				let params = {
					order_id: this.order_id,
					order_type: 3,
					use_integral: this.checked? 1 :0,
					address_id:this.form.address_id
				}
				console.log(params)
				this.$api.alipay(params).then((result) => {
					console.log(result)
					if(result.data){
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: result.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: (res) => {
								this.popupModal = true
								this.getMemberHome()
							},
							fail: function(err) {
								console.log(err)
								uni.showToast({
									title: "用户中途取消支付操作",
									icon: 'none',
									duration: 3000,
									complete: function() {
										setTimeout(function() {
											uni.hideToast();
										}, 3000);
									}
								});
							},
						});
					}else{
						this.popupModal = true
						this.getMemberHome()
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			coinsPay(type){
				if(parseFloat(this.memberHome.amount) < parseFloat(this.goods.goods_price) ){
					uni.showToast({
						title: "积分不足，兑换失败",
						icon: 'none',
						duration: 3000
					});
				}else{
					uni.showModal({
						title:"温馨提示",
						content:"当前积分剩余："+this.memberHome.amount+"，请确认是否使用积分兑换？",
						complete: (res) => {
							if(res.confirm){
								let params = {
									order_id: this.order_id,
									order_type: 3,
									address_id:this.form.address_id
								}
								this.$api.integralPay(params).then((result) => {
									this.popupModal = true
									this.getMemberHome()
								}).catch((err) => {
									console.log(err)
								})
							}
						}
					})
					
				}
			},
			wxpayFunc() {
				let params = {
					order_id: this.order_id,
					order_type: 3,
					use_integral: this.checked? 1 :0,
					address_id:this.form.address_id
				}
				console.log(params)
				this.$api.wxpay(params).then((result) => {
					console.log(result)
					if(result.data){
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {
								"appid": result.data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								"noncestr": result.data.nonceStr, // 随机字符串
								"package": "Sign=WXPay", // 固定值
								"partnerid": result.data.mch_id, // 微信支付商户号
								"prepayid": result.data.prepay_id, // 统一下单订单号 
								"timestamp": result.data.timeStamp, // 时间戳（单位：秒）
								"sign": result.data.paySign // 签名，这里用的 MD5/RSA 签名
								// "signtype": result.data.signType
							}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: (res) => {
								this.popupModal = true
								this.getMemberHome()
							},
							fail: function(err) {
								uni.showToast({
									title: "用户中途取消支付操作",
									icon: 'none',
									duration: 3000
								});
							}
						});
					}else{
						this.popupModal = true
						this.getMemberHome()
					}
					
				}).catch((err) => {
					console.log(err)
				})
			},
			withdrawal() {
				if(this.form.address_id){
					if (this.paytype == 'Alipay') {
						this.alipayFunc()
					} else if (this.paytype == 'WeChat') {
						this.wxpayFunc()
					}else if (this.paytype == 'integrate') {
						this.coinsPay('integrate')
					}else{
						uni.showToast({
							title: "请选择支付方式",
							icon: 'none',
							duration: 3000
						});
					}
				}else{
					uni.showToast({
						title:"请选择收货地址",
						icon:'none',
						duration:1500
					})
				}
				
			},
			goBank() {
				uni.navigateTo({
					url: '/pages/index/pay/mybank'
				})
			},
			getMemberHome() {
				this.$api.memberhome().then(res => {
					this.memberHome = res.data
					uni.setStorageSync('memberHome',res.data)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f5f5f5;
		min-height: 100vh;
		z-index: -1;
	}

	.box {
		padding: 30rpx;
		.goods,
		.information,
		.order {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
		}
		.address {
			padding: 32rpx 30rpx;
			
			background: #FEF1DC;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.noAddress {
				display: flex;
				justify-content: space-between;
		
				.text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		
			.haveAddress {
				display: flex;
		
				.left {
					display: flex;
					align-items: center;
					padding-right: 30rpx;
				}
		
				.right {
					.top {
						display: flex;
		
						.name {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #111111;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							padding-right: 16rpx;
						}
		
						.phone {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
						}
					}
		
					.bottom {
						padding-top: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}	
		.goods {
			height: 240rpx;
			display: flex;
			padding: 30rpx 30rpx 20rpx;
			
			.img {
				width: 180rpx;
				height: 180rpx;
			}
		
			.text {
				flex: 1;
				padding: 0 0 0 20rpx;
		
				.top {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
		
				.bottom {
					padding-top: 10rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #AAAAAA;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}
			}
		
			.num {
				width: 150rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				color: #D06122;
				line-height: 180rpx;
				text-align: right;
				font-style: normal;
			}
		}
		
	}

	.pay {
		// height: 1266rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.payment {
			padding: 60rpx 0;
			border-bottom: 2rpx solid #e7e7e7;
			display: flex;
			justify-content: space-between;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			text-align: left;
			font-style: normal;

			.payment-title {
				color: #111111;
			}

			.payment-money {
				color: #D06122;
			}
		}

		.paytype {
			.paytype-title {
				padding-top: 30rpx;
				padding-bottom: 60rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.paytype-type {

				.Alipay,
				.WeChat,
				.UnionPay {
					padding-bottom: 40rpx;
					display: flex;
					justify-content: space-between;

					.pay-title {
						display: flex;

						.pay-name {
							padding-left: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #111111;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}
			}
		}
	}

	.confirmed {
		display: flex;
		justify-content: center;
		padding-top: 360rpx;
		padding-bottom: 30rpx;
		.btn {
			width: 630rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.pay-function-text {
		padding-right: 10rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #111111;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.popup-box {
		position: fixed;
		top: 0;
		left: 0;
		width: calc(100% - 180rpx);
		padding: 0 90rpx;
		height: 100vh;
		background: rgba(#000, 0.6);
		display: flex;
		flex-direction: column;
		justify-content: center;

		.inner-box {
			border-radius: 40rpx;
			overflow: hidden;
			background: linear-gradient(to right, #F2D8AE, #FFFFFF);

			.title {
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-self: center;
				align-items: center;


				image {
					width: 192rpx;
					height: 40rpx;
				}
			}

			.content-box {
				background: url('@/static/img/popup_bg.png') no-repeat center;
				height: 516rpx;
				text-align: center;
				padding: 0 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 40rpx 40rpx 0 0;

				.img-box {
					width: 150rpx;
					height: 152rpx;
					padding: 52rpx 0 44rpx;

					image {
						width: 150rpx;
						height: 152rpx;
					}
				}

				.text {
					color: #999;
					font-size: 32rpx;
				}

				.btn-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 80rpx;
					width: 100%;

					.btn {
						border-radius: 16rpx;
						width: 200rpx;
						height: 82rpx;
						line-height: 82rpx;
						color: #fff;
						font-size: 30rpx;
						text-align: center;
					}

					.home-btn {
						background: #a3a3a3;
					}

					.order-btn {
						background: linear-gradient(to right, #FAAA7D, #EA6F29);
					}
				}
			}

			// margin: 0 90rpx;
			// background: url('@/static/img/popup_bg.png');
		}

	}
</style>